<template>
    <div class="login-box">
        <div class="login-logo">
            <!-- <svg-icon name="logo" :size="45" /> -->
            <img src="~@/assets/images/logo.png" width="45" />
            <h1 class="mb-0 ml-2 text-3xl font-bold">管理后台</h1>
        </div>
        <a-form layout="horizontal" :model="loginFormModel" @submit.prevent="handleSubmit">
            <a-form-item>
                <a-input v-model:value="loginFormModel.username" size="large" placeholder="admin">
                    <template #prefix>
                        <Icon icon="ant-design:user-outlined" />
                    </template>
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-input v-model:value="loginFormModel.password" size="large" type="password" placeholder="密码" autocomplete="new-password">
                    <template #prefix>
                        <Icon icon="ant-design:lock-outlined" />
                    </template>
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-input v-model:value="loginFormModel.verifyCode" placeholder="验证码" :maxlength="4" size="large">
                    <template #prefix>
                        <Icon icon="ant-design:safety-outlined" />
                    </template>
                    <template #suffix>
                        <img :src="captcha" class="absolute right-0 h-full cursor-pointer" @click="updateCaptcha" />
                    </template>
                </a-input>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit" size="large" :loading="loading" block>
                    登录
                </a-button>
            </a-form-item>
        </a-form>
        <footer>
        <div class="container">
            <p>版权所有 © 2025 上海亦邮. 保留所有权利.</p>
            <p><a href="http://beian.miit.gov.cn/" target="_blank">沪ICP备13019976号-1</a> | 
            
            </p>
        </div>
    </footer>
    </div>
   
</template>


<script setup lang="ts">
import { Icon } from "@/components/basic/icon";
import helper from "@/utils/helper";
import { useUserStore } from "@/store/modules/user";
import api from "@/api"; 
const userStore = useUserStore();

const loading = ref(false);
const captcha = ref("");
const loginFormModel = ref({
    username: "",
    password: "",
    verifyCode: "",
    captchaId: "",
});

const updateCaptcha = async () => {
    try {
        // 使用account服务获取验证码
        captcha.value = await api.account.accountCaptcha();
    } catch (error) {
        console.error('获取验证码失败:', error);
        helper.error('获取验证码失败，请刷新页面重试');
    }
};
updateCaptcha();

const handleSubmit = async () => {
    const { username, password, verifyCode } = loginFormModel.value;
    if (username.trim() == "" || password.trim() == "") {
        return helper.warning("用户名或密码不能为空！");
    }
    if (!verifyCode) {
        return helper.warning("请输入验证码！");
    }
    
    try {
        loading.value = true;
        
        // 首先验证验证码
        const captchaResult = await api.account.accountVerifyCaptcha({
            code: verifyCode
        });
        
        if (captchaResult.code !== 0) {
            helper.warning(captchaResult.msg || '验证码错误');
            // 刷新验证码
            updateCaptcha();
            loading.value = false;
            return;
        }
        
        // 验证码验证通过，继续登录流程
        await userStore.login({ name: username, pwd: password });
    } catch (error) {
        console.error('登录失败:', error);
        helper.error('登录失败，请重试');
        // 刷新验证码
        updateCaptcha();
    } finally {
        loading.value = false;
    }
};
</script>

<style lang="less" scoped>
.login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    padding-top: 240px;
    background: url("@/assets/login.svg");
    background-size: 100%;

    .login-logo {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        .svg-icon {
            font-size: 48px;
        }
    }

    :deep(.ant-form) {
        width: 400px;

        .ant-col {
            width: 100%;
        }

        .ant-form-item-label {
            padding-right: 6px;
        }
    }
}

footer {
    position: fixed;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: #f9f9f9;
    border-top: 1px solid #eaeaea;

    p {
        margin: 5px 0;
        color: #666;
        font-size: 14px;
    }

    a {
        color: #007bff;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}
</style>
